<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新增酒店</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <style>
        .uploadimgbox{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            margin-right: 15px;
            margin-bottom: 15px;
        }

        .uploadimgbox  .layui-icon{
            position: absolute;
            right: -15px;
            top: -15px;
            cursor: pointer;
        }
        .layui-upload-img{
            width: 100px;
        }
    </style>

</head>
<body>
<div class="layui-tab layui-tab-card" style="box-shadow: none">
    <div class="layui-tab-content">
        <div id="map" style="width: 600px;height: 150px;margin: 10px 0;margin-left: 110px;background: #eee;overflow: hidden;">
            <img src="" width="600" height="300" alt="" style="margin-top: -75px">
        </div>
        <div class="layui-tab-item layui-show">
            <form class="layui-form" id="form">
                {notempty name="$details.hotel_id"}
                <input type="hidden" name="id" value="{$details.hotel_id}">
                {/notempty}

                <div class="layui-form-item">
                    <label class="layui-form-label">渠道</label>
                    <div class="layui-input-inline" style="position: relative;width:500px;">
                        <select name="channel" id="channel" lay-filter="channel" class="layui-select">
                            <option value="">请选择</option>
                            {notempty name='$channelList'}
                            {volist name='$channelList' id='vo'}
                            <option value="{$vo.value}" {notempty name="$details.channel"}{if $details.channel==$vo.value}selected{/if}{/notempty}>{$vo.name}</option>
                            {/volist}
                            {/notempty}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关联酒店</label>
                    <div class="layui-input-inline" style="position: relative;width:500px;">
                        <select name="source_id" id="source_id"  lay-filter="source_id" class="layui-select">
                            <option value="">请选择</option>
                            {notempty name='$sourceList'}
                            {volist name='$sourceList' id='vo'}
                            <option value="{$vo.id}" {notempty name="$details.source_id"}{if $details.source_id==$vo.id}selected{/if}{/notempty}>{$vo.name}</option>
                            {/volist}
                            {/notempty}
                        </select>
                    </div>
                    <div class="layui-input-inline" style="position: relative;" id="source_id_location"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">城市</label>
                    <div class="layui-input-inline" style="position: relative;width:500px;">
                        <select name="city_id" id="city_id" class="layui-select" lay-verify="required" lay-search="">
                            <option value="">请选择</option>
                            {notempty name='$cityList'}
                            {volist name='cityList' id='vo'}
                            <option value="{$vo.id}" {notempty name="$details.city_id"}{if $details.city_id==$vo.id}selected{/if}{/notempty}>{$vo.name}</option>
                            {/volist}
                            {/notempty}
                        </select>
                    </div>
                </div>

                <!--名称-->
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline" style="position: relative;">
                        <input name="name" value="{notempty name='$details.name'}{$details.name}{/notempty}" lay-verify="required" placeholder="请输入名称获取地址" autocomplete="off" class="layui-input" type="text" style="width:500px;">
                        <div class="addressbox"></div>
                        <input type="hidden" name="lat" value="{notempty name='$details.lat'}{$details.lat}{/notempty}">
                        <input type="hidden" name="lng" value="{notempty name='$details.lng'}{$details.lng}{/notempty}">
                    </div>
                </div>

                <!--英文名-->
                <div class="layui-form-item">
                    <label class="layui-form-label">英文名</label>
                    <div class="layui-input-inline">
                        <input name="eng_name" id="eng_name" maxlength="255" value="{notempty name='$details.en_name'}{$details.en_name}{/notempty}"   placeholder="请输入" autocomplete="off" class="layui-input" style="width:500px;" type="text">
                    </div>
                </div>

                <!--地址-->
                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <input name="address" id="address" value="{notempty name='$details.address'}{$details.address}{/notempty}" lay-verify="required" placeholder="请输入地址" class="layui-input" style="width:500px" type="text">

                    </div>
                </div>

                <!--中文介绍-->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">中文介绍</label>
                    <div class="layui-input-block" style="max-width:500px;">
                        <textarea placeholder="请输入内容" id="introduce" layer-verify="required" class="layui-textarea" name="introduce">{notempty name='$details.introduce'}{$details.introduce}{/notempty}</textarea>
                    </div>
                </div>

                <!--英文介绍-->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">英文介绍</label>
                    <div class="layui-input-block" style="max-width:500px;">
                        <textarea placeholder="请输入内容" class="layui-textarea" id="eng_introduce" name="eng_introduce">{notempty name='$details.eng_introduce'}{$details.eng_introduce}{/notempty}</textarea>
                    </div>
                </div>


                <!--酒店星级-->
                <div class="layui-form-item layui-form-text show3">
                    <label class="layui-form-label">星级</label>
                    <div class="layui-input-inline">
                        <select name="level" class="layui-select" layer-verify="required">
                            <option value="">请选择星级</option>
                            {notempty name='$levels'}
                            {volist name='levels' id='vo'}
                            <option value="{$key}" {notempty name="$details.level"}{if $details.level==$key}selected{/if}{/notempty}>{$vo}</option>
                            {/volist}
                            {/notempty}
                        </select>
                    </div>
                </div>

                <!--酒店参数-->
                <div class="layui-form-item">
                    <label class="layui-form-label">早餐</label>
                    <div class="layui-input-block" style="max-width:500px;">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="breakfast_fee">{notempty name='$details.breakfast_fee'}{$details.breakfast_fee}{/notempty}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">加人费</label>
                    <div class="layui-input-block" style="max-width:500px;">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="charging_fee">{notempty name='$details.charging_fee'}{$details.charging_fee}{/notempty}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">服务费</label>
                    <div class="layui-input-block" style="max-width:500px;">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="service_fee">{notempty name='$details.service_fee'}{$details.service_fee}{/notempty}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block" style="max-width:500px;">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="remark">{notempty name='$details.remark'}{$details.remark}{/notempty}</textarea>
                    </div>
                </div>
                {empty name="$details"}
                <div class="layui-form-item">
                    <label class="layui-form-label">创建<br>酒店POI</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="createPOI" lay-skin="switch" lay-filter="" lay-text="是|否">
                    </div>
                </div>
                {/empty}
                <!--图片上传-->
                <div class="layui-form-item" style="margin:0 110px">
                    <div class="layui-upload" >
                        <button type="button" class="layui-btn" id="upload">图片上传（格式：jpg,png,gif,jpeg）</button>
                        {include file='public/uploadfiletips'}
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="seeupload">
                                {notempty name="$details.thumb"}
                                {if $thumb=array_filter(explode(',',$details.thumb))}
                                {volist name="$thumb" id="vo"}
                                {if !empty($vo)}
                                <span class="uploadimgbox"><img class="layui-upload-img" src="{$vo}"><i class="layui-icon">&#x1006;</i></span>
                                {/if}
                                {/volist}
                                {/if}
                                {/notempty}
                            </div>
                        </blockquote>
                    </div>
                    <input id="upload-thumb" type="hidden" name="thumb" value="{notempty name='$details.thumb'}{$details.thumb}{/notempty}">
                </div>



                <!--提交-->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a class="layui-btn" lay-submit lay-filter="form">立即提交</a>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<script src="{$Think.config.amap_url}"></script>
<script>
    layui.use(['layer', 'form','upload'], function(){
        var upload = layui.upload,
            layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        //执行实例
        upload.render({
            elem: '#upload'
            ,url: "{:url('common/upload')}"
            ,multiple: true
            ,accept:"images"
            ,size:"50000"
            , before: function (obj) {
                layer.load(2);
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    EXIF.getData(file, function() {
                        //获取图片Orientation
                        orient = EXIF.getTag(this, 'Orientation');
                        if(orient==6){
                            //逆时针旋转了90度
                            rotateBase64Img(result,90,callback);
                        }else if(orient==1){
                            $('#demo1').attr('src', result); //图片链接（base64）
                        }
                    });

                });
            }
            ,done: function(res){
                //上传完毕回调
                layer.closeAll('loading');
                if(res.code == 2) {
                    $('#seeupload').append('<span class="uploadimgbox"><img class="layui-upload-img" src="'+res.src+'"><i class="layui-icon">&#x1006;</i></span>');
                    $('#upload-thumb').val($('#upload-thumb').val()+","+res.src);
                } else {
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                //请求异常回调
                layer.closeAll('loading');
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //通过选择城市跳转到不同城市
        form.on('select(channel)',function(data){
            var value = data.value;
            if(value=="" || value==undefined){
                return false;
            }
            var loading = layer.load(2);
            $.post("{:url('admin/hotel/getThirdHotelList')}",{channel:value},function (res) {
                layer.close(loading);
                if(res.code > 0){
                    $("#source_id option:not(:first)").remove();
                    var html = "";
                    $.each(res.data,function (i,v) {
                        html += "<option value='"+v.id+"'>"+v.name+"</option>";
                    })
                    $("#source_id").append(html);
                    form.render('select');
                }else{
                    layer.msg(res.msg);
                }
            },'json')
        })
        form.on('select(source_id)',function(data){
            var value = data.value;
            var channel = $("#channel").val();
            if(channel=="" || channel==undefined){
                layer.msg('请先选择渠道！');return false;
            }
            if(value=="" || value==undefined){
                return false;
            }
            var loading = layer.load(2);
            $.post("{:url('admin/hotel/getThirdHotelDetails')}",{channel:channel,id:value},function (res) {
                layer.close(loading);
                if(res.code > 0){
                    setValueHotelForm(res.data);
                }else{
                    layer.msg(res.msg);
                }
            },'json')
        })
        //name,en_name,address,lat,lng,star,service_fee,charging_fee,breakfast_fee
        function setValueHotelForm(data){
            $('input[name=name]').val(data.name);
            $('input[name=eng_name]').val(data.en_name);
            $('input[name=address]').val(data.address);
            $('input[name=lat]').val(data.lat);
            $('input[name=lng]').val(data.lng);
            $('select[name=level]').val(data.star);
            $('textarea[name=service_fee]').val(data.service_fee);
            $('textarea[name=charging_fee]').val(data.charging_fee);
            $('textarea[name=breakfast_fee]').val(data.breakfast_fee);
            $("#source_id_location").text(data.show_address)
            form.render('select');
        }
        //表单提交
        form.on('submit(form)', function(data) {
            //城市 名称 简介 图片均不能为空
            var city_id = $('select[name=city_id]').val();
            if(city_id=='' || city_id==undefined){layer.msg('请选择所属城市');return false;}
            var name = $('input[name=name]').val();
            if(name=='' || name==undefined){layer.msg('请填写名称');return false;}
            var introduce = $('textarea[name=introduce]').val();
            if(introduce=='' || introduce==undefined){layer.msg('请填写中文简介');return false;}
            var thumb = $('input[name=thumb]').val();
            if(thumb=='' || thumb==undefined){layer.msg('请至少上传一张图片');return false;}
            //检查必要数据
            var lat = $('input[name=lat]').val();
            var lng = $('input[name=lng]').val();
            if(lat=='' || lng=='' || lat==undefined || lng==undefined){
                layer.msg('请填写地址并选择');return false;
            }
            var add_load_index = layer.load(2,{shade: [0.5, '#393D49']});
            $.ajax({
                url:"{:url('admin/hotel/addNewHotel')}",
                data:$('#form').serialize(),
                type:'post',
                async: false,
                success:function(res) {
                    layer.close(add_load_index);
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        },1500)
                    }
                }
            });
            return false;
        });

        //取消地址列表框
        $('body').click(function(e) {
            if(!$(e.target).hasClass('geoaddress')){
                hiddenAddressBox();
            }
        })

        //清掉地址列表
        function hiddenAddressBox()
        {
            $(".addressbox").html("");
        }
    });

    $("#seeupload").on("click",".layui-icon",function(){
        $(this).parent().remove();
        thumb("seeupload");
    });

    function thumb(obj){
        var thumbs="";
        $("#"+obj).find("img").each(function(){
            var url=$(this).attr("src");
            thumbs+=","+url;
        });
        $("#upload-thumb").val(thumbs);
    }
</script>
<script>
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        $(window).on('load', function() {
            form.on('select(setType)',function(data){
                var typeid = data.value;
                setShow(typeid);
            });
        });
    });
</script>
<script>
    //页面加载完成加载
    window.onload = function(){
        //选中地点
        var googleMapData = [];
        //如果详细地址未匹配到信息则使用列表中的数据
        function setAddressByList(res,googleMapData,address)
        {
            if(res.data.candidates.length < 1 || "OK" != res.data.status){
                if(googleMapData.length > 0){
                    $.each(googleMapData,function (i,v) {
                        if(v.formatted_address==address){
                            $.ajaxSettings.async = false;
                            $.post('{:url("/api/common/getGoogleImgByLatLng")}',{
                                lat:v.geometry.location.lat,
                                lng:v.geometry.location.lng,
                                zoom:8
                            },function (img_res) {
                                if(img_res.code>0){
                                    res.data.google_map_img = img_res.data.google_map_img;
                                    res.data.status = 'OK';
                                }
                            },'json')
                            $.ajaxSettings.async = true;
                            res.data.candidates.push(v);return false;
                        }
                    })
                }
            }

            return res;
        }
        function setAddress(address) {
            //切换成接口访问
            $.post('{:url("/api/common/getGoogleAddressList")}',{address:address,getMap:true},function (res) {
                if(res.code>0){
                    var res = setAddressByList(res,googleMapData,address);
                    var candidates = res.data.candidates;
                    if(candidates.length>0 && "OK" == res.data.status){
                        $("input[name=lat]").val(candidates[0].geometry.location.lat);
                        $("input[name=lng]").val(candidates[0].geometry.location.lng);
                        $("input[name=place_id]").val(candidates[0].place_id);
                        $("input[name=eng_name]").val(candidates[0].name);
                        $("input[name=address]").val(address);
                        $("input[name=map_thumb_img]").val(res.data.google_map_img);
                        $("#map img").attr('src',res.data.google_map_img);
                    }
                }
            },'json')
        }
        //获取地址列表
        function getAddressList(address) {
            var addressbox="";
            if(address=='' || address==undefined){
                return false;
            }
            //切换成接口访问
            $.post('{:url("/api/common/getGoogleAddressList")}',{address:address},function (res) {
                if(res.code>0){
                    var candidates = res.data.candidates;
                    googleMapData = res.data.candidates;
                    if(candidates.length > 0 && "OK" == res.data.status){
                        $.each(candidates,function (i,v) {
                            if(i>4){
                                return false;
                            }
                            addressbox+="<span>"+v.formatted_address+"</span>";
                        })
                        console.log(addressbox);
                        $(".addressbox").html(addressbox);
                    }
                }
            },'json')
        }
        //延迟加载输入
        var timeoutId = 0;
        //英文输入绑定事件
        $("input[name=name]").on("input",function(){
            hiddenAddressBox();
            clearTimeout(timeoutId);
            var value = $(this).val();
            timeoutId = setTimeout(function(){
                getAddressList(value);
            },500)
        });
        //点击地址设置地址
        $("#form .addressbox").on("click","span",function(){
            var address = $(this).html();
            setAddress(address);
        });
        //取消地址列表框
        $("body").on("click",function(){
            hiddenAddressBox()
        })
        //清掉地址列表
        function hiddenAddressBox()
        {
            $(".addressbox").html("");
        }


    }
</script>

</body>
<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('introduce',{
        initialFrameHeight: 100,
        initialFrameWidth: 480,
        zIndex:99,
        toolbars:[
            [ 'source'],
            ['bold', 'italic', 'underline', 'fontborder', 'strikethrough','removeformat']
        ]
    });
    var ue2 = UE.getEditor('eng_introduce',{
        initialFrameHeight: 100,
        initialFrameWidth: 480,
        zIndex:99,
        toolbars:[
            [ 'source'],
            ['bold', 'italic', 'underline', 'fontborder', 'strikethrough','removeformat']
        ]
    });
</script>
</html>